<template>
  <!-- 测试 defineModel 用法以及修饰符用法 -->
  <div class="w100 h100">
    <el-input
      v-model="childNumModel"
      placeholder="请输入信息"
      size="default"
      clearable
    ></el-input>
    <el-button type="primary" size="default" @click="add"
      >childNumModel+100</el-button
    >
    <br />
    <br />
    <div>
      <el-radio-group v-model="radio1" size="large">
        <el-radio-button label="New York" />
        <el-radio-button label="Washington" />
        <el-radio-button label="Los Angeles" />
        <el-radio-button label="Chicago" />
      </el-radio-group>
    </div>
  </div>
</template>

<script setup>
const [childNumModel, childNumModelModifiers] = defineModel("add100");
// const [childNumModel, childNumModelModifiers] = defineModel("add100", {type: Number});    // 也可以这么写
console.log(childNumModelModifiers); // 修饰符

const radio1 = defineModel(); // 默认情况下指代的是 v-model

const add = () => {
  const modifier = Object.entries(childNumModelModifiers);
  let needTimes = modifier.filter((it) => {
    if (modifier.length && it?.length) {
      return it[0].includes("times") && it[0] != "times" && it[1] === true;
    }
  });
  let timesArr = [];
  needTimes.length &&
    needTimes.forEach((it) => {
      timesArr.push(it[0].split("times")[1]);
    });
  if (
    (childNumModel.value + "").includes("e") ||
    (childNumModel.value + "").includes("x") ||
    (childNumModel.value + "").includes("o")
  ) {
    return false;
  }
  if (
    (childNumModel.value ?? "") != "" &&
    !Number.isNaN(Number(childNumModel.value))
  ) {
    let times = 1;
    for (let i = 0; i < timesArr.length; i++) {
      times = timesArr[i].replaceAll("P", ".") * times; // 小数点用 P 分割代替 .
    }
    console.log("times，增加数是 100 的倍数 :>> ", times); // 这里是增加的是 100 的倍数倍
    if (Number.isNaN(Number(times))) {
      times = 0;
    }
    childNumModel.value = childNumModel.value - 0 + 100 * times;
  }
};
</script>

<style lang="scss" scoped>
.w100 {
  width: 100%;
}
.h100 {
  height: 100%;
}
</style>
